﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>homePage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!--css-->
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/home/home.css" rel="stylesheet" />

    <!--lib refer-->
    <!-- jasmid package -->
    <script src="/JsLib/lib/jasmid/stream.js"></script>
    <script src="/JsLib/lib/jasmid/midifile.js"></script>
    <script src="/JsLib/lib/jasmid/replayer.js"></script>

    <!-- base64 packages -->
    <script src="/JsLib/VersionControl.Base64.js" type="text/javascript"></script>
    <script src="/JsLib/lib/base64binary.js" type="text/javascript"></script>

    <!-- soundfont.js package -->
    <script src="/JsLib/Color.js" type="text/javascript"></script>
    <script src="/JsLib/Event.js" type="text/javascript"></script>
    <script src="/JsLib/Event.Mouse.js" type="text/javascript"></script>
    <script src="/JsLib/DOMLoader.XMLHttp.js" type="text/javascript"></script>
    <script src="/JsLib/DOMLoader.script.js" type="text/javascript"></script>
    <script src="/JsLib/MIDI.audioDetect.js" type="text/javascript"></script>
    <script src="/JsLib/MIDI.loadPlugin.js" type="text/javascript"></script>
    <script src="/JsLib/MIDI.Plugin.js" type="text/javascript"></script>
    <script src="/JsLib/MIDI.Player.js" type="text/javascript"></script>
    <script src="/JsLib/MidiGenerator.js" type="text/javascript"></script>
    <script src="/JsLib/MusicTheory.Synesthesia.js" type="text/javascript"></script>
    <script src="/JsLib/Widgets.Loader.js" type="text/javascript"></script>

    <!--user refer-->
    <script src="../../lb_Tam/Record.js"></script>
    <script src="../../lb_Dong/DongPiano.js"></script>
    <script src="../../lb_Dong/PressNote.js"></script>

    <script src="../../lb_Hau/block.js"></script>
    <script src="../../lb_Hau/control.js"></script>

    <script src="../../lb_Tam/lbet.js"></script>
    <script src="../../lb_Tam/main.js"></script>

    <!--js-->
    <script src="/pages/home/home.js"></script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->

    <div class="mainPage fragment">

        <div class="piano-screen">
            <canvas id="cvMain" style="border-width: 1px; border-style: solid; border-color: black; background-color:black; margin-left: 4px;width:4010px; height:100% " aria-orientation="vertical"></canvas>
		</div>

        <div class="piano-info">
            <table style="height:100%">
            <tr>
                <td class="title" style="width:300px">
                    <span >Chuyện tình dưới mưa</span><br />
                    <span style="font-size:13px">Tư Cuồng</span>
                </td>

                <td style="width:auto">
                    <!--<button id="btnRecord"></button>
			        <button id="btnSave"></button>-->
                    
                    <a href="#">
                        <img src="../../images/lb-icon/Download.png" width="70" /></a>

                    <a href="#">
                        <img src="../../images/lb-icon/Stop.png" width="70" /></a>

                    <a href="#">
                        <img src="../../images/lb-icon/Media-Play.png" width="70" /></a>
                </td>

                <td style="width:70px">
                    <a href="#" style="margin-left:70px">
                        <img src="../../images/lb-icon/Small%20Thumbnail%20View.png" width="70" /></a>
                </td>
            </tr>
            </table>
		</div>

        <div id="piano" class="piano-keyboard">
            <div id="note0" class="white" style="width: 17px; height: 126px;  left: 0px; color: transparent;text-shadow: none; "></div>
            <div id="note2" class="white" style="width: 17px; height: 126px;  left: 19px; color: transparent; text-shadow: none;"></div>
            <div id="note3" class="white" style="width: 17px; height: 126px;  left: 38px; color: transparent; text-shadow: none;"></div>
            <div id="note5" class="white" style="width: 17px; height: 126px;  left: 57px; color: transparent; text-shadow: none;"></div>
            <div id="note7" class="white" style="width: 17px; height: 126px;  left: 76px; color: transparent; text-shadow: none;"></div>
            <div id="note8" class="white" style="width: 17px; height: 126px;  left: 95px; color: transparent; text-shadow: none;"></div>
            <div id="note10" class="white" style="width: 17px; height: 126px;  left: 114px; color: transparent; text-shadow: none;"></div>
            <div id="note12" class="white" style="width: 17px; height: 126px;  left: 133px; color: transparent; text-shadow: none;"></div>
            <div id="note14" class="white" style="width: 17px; height: 126px;  left: 152px; color: transparent; text-shadow: none;"></div>
            <div id="note15" class="white" style="width: 17px; height: 126px;  left: 171px; color: transparent; text-shadow: none;"></div>
            <div id="note17" class="white" style="width: 17px; height: 126px;  left: 190px; color: transparent; text-shadow: none;"></div>
            <div id="note19" class="white" style="width: 17px; height: 126px;  left: 209px; color: transparent; text-shadow: none;"></div>
            <div id="note20" class="white" style="width: 17px; height: 126px;  left: 228px; color: transparent; text-shadow: none;"></div>
            <div id="note22" class="white" style="width: 17px; height: 126px;  left: 247px; color: transparent; text-shadow: none;"></div>
            <div id="note24" class="white" style="width: 17px; height: 126px;  left: 266px; color: transparent; text-shadow: none;"></div>
            <div id="note26" class="white" style="width: 17px; height: 126px;  left: 285px; color: transparent; text-shadow: none;"></div>
            <div id="note27" class="white" style="width: 17px; height: 126px;  left: 304px; color: transparent; text-shadow: none;"></div>
            <div id="note29" class="white" style="width: 17px; height: 126px;  left: 323px; color: transparent; text-shadow: none;"></div>
            <div id="note31" class="white" style="width: 17px; height: 126px;  left: 342px; color: transparent; text-shadow: none;"></div>
            <div id="note32" class="white" style="width: 17px; height: 126px;  left: 361px; color: transparent; text-shadow: none;"></div>
            <div id="note34" class="white" style="width: 17px; height: 126px;  left: 380px; color: transparent; text-shadow: none;"></div>
            <div id="note36" class="white" style="width: 17px; height: 126px;  left: 399px; color: transparent; text-shadow: none;"></div>
            <div id="note38" class="white" style="width: 17px; height: 126px;  left: 418px; color: transparent; text-shadow: none;"></div>
            <div id="note39" class="white" style="width: 17px; height: 126px;  left: 437px; color: transparent; text-shadow: none;"></div>
            <div id="note41" class="white" style="width: 17px; height: 126px;  left: 456px; color: transparent; text-shadow: none;"></div>
            <div id="note43" class="white" style="width: 17px; height: 126px;  left: 475px; color: transparent; text-shadow: none;"></div>
            <div id="note44" class="white" style="width: 17px; height: 126px;  left: 494px; color: transparent; text-shadow: none;"></div>
            <div id="note46" class="white" style="width: 17px; height: 126px;  left: 513px; color: transparent; text-shadow: none;"></div>
            <div id="note48" class="white" style="width: 17px; height: 126px;  left: 532px; color: transparent; text-shadow: none;"></div>
            <div id="note50" class="white" style="width: 17px; height: 126px;  left: 551px; color: transparent; text-shadow: none;"></div>
            <div id="note51" class="white" style="width: 17px; height: 126px;  left: 570px; color: transparent; text-shadow: none;"></div>
            <div id="note53" class="white" style="width: 17px; height: 126px;  left: 589px; color: transparent; text-shadow: none;"></div>
            <div id="note55" class="white" style="width: 17px; height: 126px;  left: 608px; color: transparent; text-shadow: none;"></div>
            <div id="note56" class="white" style="width: 17px; height: 126px;  left: 627px; color: transparent; text-shadow: none;"></div>
            <div id="note58" class="white" style="width: 17px; height: 126px;  left: 646px; color: transparent; text-shadow: none;"></div>
            <div id="note60" class="white" style="width: 17px; height: 126px;  left: 665px; color: transparent; text-shadow: none;"></div>
            <div id="note62" class="white" style="width: 17px; height: 126px;  left: 684px; color: transparent; text-shadow: none;"></div>
            <div id="note63" class="white" style="width: 17px; height: 126px;  left: 703px; color: transparent; text-shadow: none;"></div>
            <div id="note65" class="white" style="width: 17px; height: 126px;  left: 722px; color: transparent; text-shadow: none;"></div>
            <div id="note67" class="white" style="width: 17px; height: 126px;  left: 741px; color: transparent; text-shadow: none;"></div>
            <div id="note68" class="white" style="width: 17px; height: 126px;  left: 760px; color: transparent; text-shadow: none;"></div>
            <div id="note70" class="white" style="width: 17px; height: 126px;  left: 779px; color: transparent; text-shadow: none;"></div>
            <div id="note72" class="white" style="width: 17px; height: 126px;  left: 798px; color: transparent; text-shadow: none;"></div>
            <div id="note74" class="white" style="width: 17px; height: 126px;  left: 817px; color: transparent; text-shadow: none;"></div>
            <div id="note75" class="white" style="width: 17px; height: 126px;  left: 836px; color: transparent; text-shadow: none;"></div>
            <div id="note77" class="white" style="width: 17px; height: 126px;  left: 855px; color: transparent; text-shadow: none;"></div>
            <div id="note79" class="white" style="width: 17px; height: 126px;  left: 874px; color: transparent; text-shadow: none;"></div>
            <div id="note80" class="white" style="width: 17px; height: 126px;  left: 893px; color: transparent; text-shadow: none;"></div>
            <div id="note82" class="white" style="width: 17px; height: 126px;  left: 912px; color: transparent; text-shadow: none;"></div>
            <div id="note84" class="white" style="width: 17px; height: 126px;  left: 931px; color: transparent; text-shadow: none;"></div>
            <div id="note86" class="white" style="width: 17px; height: 126px;  left: 950px; color: transparent; text-shadow: none;"></div>
            <div id="note87" class="white" style="width: 17px; height: 126px;  left: 969px; color: transparent; text-shadow: none;"></div>
            <div id="note1" class="black" style="width: 10px; height: 84px;  left: 12.5px; color: transparent; text-shadow: none;"></div>
            <div id="note4" class="black" style="width: 10px; height: 84px;  left: 50.5px; color: transparent; text-shadow: none;"></div>
            <div id="note6" class="black" style="width: 10px; height: 84px;  left: 69.5px; color: transparent; text-shadow: none;"></div>
            <div id="note9" class="black" style="width: 10px; height: 84px; left: 107.5px; color: transparent; text-shadow: none;"></div>
            <div id="note11" class="black" style="width: 10px; height: 84px;  left: 126.5px; color: transparent; text-shadow: none;"></div>
            <div id="note13" class="black" style="width: 10px; height: 84px;  left: 145.5px; color: transparent; text-shadow: none;"></div>
            <div id="note16" class="black" style="width: 10px; height: 84px;  left: 183.5px; color: transparent; text-shadow: none;"></div>
            <div id="note18" class="black" style="width: 10px; height: 84px;  left: 202.5px; color: transparent; text-shadow: none;"></div>
            <div id="note21" class="black" style="width: 10px; height: 84px;  left: 240.5px; color: transparent; text-shadow: none;"></div>
            <div id="note23" class="black" style="width: 10px; height: 84px;  left: 259.5px; color: transparent; text-shadow: none;"></div>
            <div id="note25" class="black" style="width: 10px; height: 84px;  left: 278.5px; color: transparent; text-shadow: none;"></div>
            <div id="note28" class="black" style="width: 10px; height: 84px;  left: 316.5px; color: transparent; text-shadow: none;"></div>
            <div id="note30" class="black" style="width: 10px; height: 84px;  left: 335.5px; color: transparent; text-shadow: none;"></div>
            <div id="note33" class="black" style="width: 10px; height: 84px;  left: 373.5px; color: transparent; text-shadow: none;"></div>
            <div id="note35" class="black" style="width: 10px; height: 84px;  left: 392.5px; color: transparent; text-shadow: none;"></div>
            <div id="note37" class="black" style="width: 10px; height: 84px;  left: 411.5px; color: transparent; text-shadow: none;"></div>
            <div id="note40" class="black" style="width: 10px; height: 84px;  left: 449.5px; color: transparent; text-shadow: none;"></div>
            <div id="note42" class="black" style="width: 10px; height: 84px;  left: 468.5px; color: transparent; text-shadow: none;"></div>
            <div id="note45" class="black" style="width: 10px; height: 84px;  left: 506.5px; color: transparent; text-shadow: none;"></div>
            <div id="note47" class="black" style="width: 10px; height: 84px;  left: 525.5px; color: transparent; text-shadow: none;"></div>
            <div id="note49" class="black" style="width: 10px; height: 84px;  left: 544.5px; color: transparent; text-shadow: none;"></div>
            <div id="note52" class="black" style="width: 10px; height: 84px;  left: 582.5px; color: transparent; text-shadow: none;"></div>
            <div id="note54" class="black" style="width: 10px; height: 84px;  left: 601.5px; color: transparent; text-shadow: none;"></div>
            <div id="note57" class="black" style="width: 10px; height: 84px;  left: 639.5px; color: transparent; text-shadow: none;"></div>
            <div id="note59" class="black" style="width: 10px; height: 84px;  left: 658.5px; color: transparent; text-shadow: none;"></div>
            <div id="note61" class="black" style="width: 10px; height: 84px;  left: 677.5px; color: transparent; text-shadow: none;"></div>
            <div id="note64" class="black" style="width: 10px; height: 84px;  left: 715.5px; color: transparent; text-shadow: none;"></div>
            <div id="note66" class="black" style="width: 10px; height: 84px;  left: 734.5px; color: transparent; text-shadow: none;"></div>
            <div id="note69" class="black" style="width: 10px; height: 84px;  left: 772.5px; color: transparent; text-shadow: none;"></div>
            <div id="note71" class="black" style="width: 10px; height: 84px;  left: 791.5px; color: transparent; text-shadow: none;"></div>
            <div id="note73" class="black" style="width: 10px; height: 84px;  left: 810.5px; color: transparent; text-shadow: none;"></div>
            <div id="note76" class="black" style="width: 10px; height: 84px;  left: 848.5px; color: transparent; text-shadow: none;"></div>
            <div id="note78" class="black" style="width: 10px; height: 84px;  left: 867.5px; color: transparent; text-shadow: none;"></div>
            <div id="note81" class="black" style="width: 10px; height: 84px;  left: 905.5px; color: transparent; text-shadow: none;"></div>
            <div id="note83" class="black" style="width: 10px; height: 84px;  left: 924.5px; color: transparent; text-shadow: none;"></div>
            <div id="note85" class="black" style="width: 10px; height: 84px;  left: 943.5px; color: transparent; text-shadow: none;"></div>
		</div>   </div>
</body>
</html>
